<template>
    <div class="Box">
        <router-link to="" class="img">
            <img :src="props.cover"/>
            <p class="imgLogo">
                <span>{{ props.total }}</span>
                <img src="@/assets/up/docList.png" v-if="props.isDoc"/>
                <img src="@/assets/up/listWhite.png" v-else/>
            </p>
            <span class="icon">
                <img src="@/assets/up/play.png" />
            </span>
        </router-link>
        <div class="info">
            <router-link to=""><span>{{ props.name }}</span></router-link>
            <span>{{ formatIsYMD(props.ptime) }}</span>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { formatIsYMD } from '@/utils/format'
interface Props{
    season_id:number
    mid:number  
    cover:string
    name:string
    ptime:number    //更新时间
    total:number   
    isDoc?:boolean
}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
.Box{
    width: 100%;
    @include flexColumnCenter;
    gap: 10px;
}
.img{
    position: relative;
    width: 100%;
    height: 120px;
    @include flexRowCenter;
    & img:nth-child(1){
        width: 100%;
        height: 100%;
        border-radius: 4px;
    }
}
.imgLogo{
    position: absolute;
    width: 80px;
    height: 100%;
    right: 0;
    @include flexColumnCenter;
    background-color: rgb(0, 0, 0, 0.5);
    color: white;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    & span:nth-child(1){
        font-size: 18px;
    }
    & img:nth-child(2){
        width: 25px;
        height: 25px;

    }
}
.info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: calc(100% - 130px);
    & a:nth-child(1){
        text-align: left;
        width: 100%;
        font-size: 13px;
        color: #222222;
        line-height: 16px;
        height: 32px;
        @include tweLineShow;
    }
    & a:hover{
        color: #00A1D6;
    }
    & span:nth-child(2) {
        color: #999999;
        line-height: 16px;
        font-size: 13px;
        text-align: left;
    }
}
.icon{
    background-color: rgb(0, 0, 0, 0.8);
    position: absolute;
    bottom: 5px;
    right: 5px;
    padding: 5px;
    border-radius: 4px;
    @include flexRowCenter;
    & img:nth-child(1){
        width: 15px;
        height: 15px;
    }
}
</style>